<template>
  <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
          <topcont></topcont>
          <div class="content">
              <div class="setCont">
                <div class="mainTop">
                  <div class="mainTitle">编辑课程</div>
                  <btn value="返回列表" @click="backfn"></btn>
                </div>
                <div class="formCont">
                  <el-form :model="userInfo" ref="userInfo" :rules="rules" label-width="120px">
                    <el-form-item label="课程封面" v-if="userInfo.course_cover">
                      <cropperCom @successCropper="getHeadImg" :propImg="userInfo.course_cover"></cropperCom>
                    </el-form-item>
                    <el-form-item label="课程昵称" prop="course_name">
                      <el-input v-model="userInfo.course_name"></el-input>
                    </el-form-item>
                    <el-form-item label="起购数量">
                      <el-input v-model="userInfo.start_num"></el-input>
                    </el-form-item>
                    <el-form-item label="课程排序">
                      <el-input v-model="userInfo.course_sort"></el-input>
                    </el-form-item>
                    <el-form-item label="课程单位">
                      <el-radio v-model="userInfo.course_unit" :label="1">小时</el-radio>
                      <el-radio v-model="userInfo.course_unit" :label="2">课时</el-radio>
                    </el-form-item>
                    <el-form-item label="课程状态">
                      <el-radio v-model="userInfo.course_status" :label="1">正常</el-radio>
                      <el-radio v-model="userInfo.course_status" :label="2">禁用</el-radio>
                    </el-form-item>
                    <el-form-item label="课程介绍" prop="course_introduce">
                      <el-input type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          v-model="userInfo.course_introduce">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="课程内容">
                      <btn value="+新增课程内容" @click="addContFn"></btn>
                    </el-form-item>
                    <el-form-item label=" ">
                      <div class="contentItem" :key="index" v-for="(item,index) in userInfo.course_content">
                          <el-input v-model="item.name" placeholder="请输入课程内容"></el-input>
                          <el-button class="delBtn" type="danger" @click="delFn(index)" plain>删除</el-button>
                      </div>
                    </el-form-item>
                    <el-form-item label="课程规格">
                    </el-form-item>
                    <el-form-item label=" ">
                      <div class="contentItem noFlex" :key="index" v-for="(item,index) in userInfo.course_rule">
                        <div class="priceTr">
                            <el-input placeholder="请输入规格内容" disabled v-model="item.rule_name">
                              <template slot="prepend">规格内容</template>
                            </el-input>
                          </div>
                          <div class="priceTr">
                            <el-input placeholder="请输入规格单价" v-model="item.price">
                              <template slot="prepend">规格单价</template>
                            </el-input>
                          </div>
                      </div>
                    </el-form-item>
                    <el-form-item class="formImg" label="详情图片" v-if="userInfo.course_details_img">
                      <defUpImg width="150px" :propImg="userInfo.course_details_img" @upImgSuccess="getcourse_details_img"></defUpImg>
                    </el-form-item>
                    <el-form-item label="">
                      <btn value="保存" @click="saveFn"></btn>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import leftcont from '@/components/leftCont.vue'
import topcont from '@/components/topCont.vue'
import btn from '@/components/public/btn.vue'
import defUpImg from '@/components/public/defUpImg.vue'
import { packSave,editShowPack} from '@/http/api'
import cropperCom from '@/components/public/cropperCom.vue'

  export default {
    components: {cropperCom,leftcont,topcont,btn,defUpImg},
    data() {
      var checkName = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入课程名称'));
          }else{
              return callback()
          }
      };
      var checkcourse_introduce = (rule, value, callback) => {
          if (value=='') {
              return callback(new Error('请输入课程描述'));
          }else{
              return callback()
          }
      };
      return {
          userInfo:{
            
          },
          rules: {
              course_name: [
                  { validator: checkName,required: true,trigger: 'blur' }
              ],
              
              course_introduce:[
                  { validator: checkcourse_introduce,required: true,trigger: 'blur' }
              ],
              
          },
      }
    },
    props: {},
    methods:{
      backfn(){
        this.$router.back()
      },
      addContFn(){
        this.userInfo.course_content.push({name:''})
      },
      delFn(i){
        this.userInfo.course_content.splice(i, 1)
      },
      getHeadImg(src){
        this.userInfo.course_cover = src
      },
      getcourse_details_img(src){
        this.userInfo.course_details_img = src
      },
      saveFn(){
          this.$refs['userInfo'].validate((valid) => {
              if (valid) {
                  if(!this.userInfo.course_cover){
                      this.$message('请上传课程封面')
                      return false
                  }else{
                      this.Submit()
                  }
              } else {
                  return false;
              }
          })
      },
      Submit(){
        let data = this.userInfo
        let loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        });
        packSave(data).then((res) => {
          if(res.data.code==1){
            this.$message({
              message: '编辑成功',
              type: 'success'
            });
            setTimeout(() => {
              this.$router.back()
            }, 1500);
          }else{
            this.$message(res.data.msg)
          }
          loading.close();
        }).catch(()=>{
          loading.close();
          this.$message('网络请求超时');
        })
      },
      getData(){
        let data ={
          family_course_id:this.$route.query.id
        }
        editShowPack(data).then((res) => {
            if(res.data.code==1){
                let resData = res.data.data
                this.userInfo = {
                    family_course_id:this.$route.query.id,
                    course_name:resData.course_name,
                    course_status:resData.course_status,
                    course_unit:resData.course_unit,
                    start_num:resData.start_num,
                    course_sort:resData.course_sort,
                    course_introduce:resData.course_introduce,
                    course_cover:resData.course_cover,
                    course_content:resData.course_content,
                    course_rule:resData.course_rule,
                    course_details_img:resData.course_details_img,
                }
                
            }else{
                this.$message(res.data.msg)
            }
        }).catch((err)=>{
        this.$message('网络请求超时');
      })
    }
    },
    mounted(){
    },
    created() {
      this.getData()
    },
  }
</script>

<style scoped lang="less">
.container{
  width: 100%;
  display: flex;
  overflow: hidden;
  .righCont{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 15px;
    height: 100%;
    width: 10px;
    background-color: #F4F8FF;
    .content{
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      flex: 1;
      overflow: auto;
      .setCont{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        .mainTop{
          display: flex;
          margin-bottom: 25px;
          align-items: center;
          justify-content: space-between;
          .mainTitle{
            font-size: 14px;
            font-weight: bold;
          }
        }
        .formCont{
          width: 600px;
          .contentItem{
            display: flex;
            padding: 15px;
            box-sizing: border-box;
            background-color: #f7f7f7;
            border-radius: 5px;
            align-items: center;
            margin-bottom: 10px;
            .priceTr{
              margin-bottom: 10px;
            }
            .delBtn{
              margin-left: 15px;
              width: 100px;
            }
          }
          .noFlex{
            display: block;
            .delBtn{
              margin-left: 0;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.el-collapse-item__wrap{
  border-bottom: none;
}
.el-collapse{
  border-top: none;
  border-bottom: none;
}
.content { overflow: -moz-scrollbars-none; }
.content::-webkit-scrollbar { width: 0 !important }
.content { -ms-overflow-style: none; }

</style>
<style>
.formImg .el-form-item__content{
line-height: normal !important;;
}
</style>